<template>
    <div>
        <el-dialog v-model="state.visible" :title="state.title">
            <el-upload
                    class="upload-demo"
                    drag
                    :action="uploadConfig.url"
                    multiple
                    :headers="uploadConfig.headers"
            >
                <el-icon class="el-icon--upload">
                    <upload-filled/>
                </el-icon>
                <div class="el-upload__text">
                    Drop file here or <em>click to upload</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        jpg/png files with a size less than 500kb
                    </div>
                </template>
            </el-upload>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
import {UploadFilled} from '@element-plus/icons-vue'
import Cookies from "js-cookie";

const state = reactive({
    title: "文件上传",
    visible: false
})
const uploadConfig = reactive({
    headers: {'SA-TOKEN': Cookies.get('token')},
    url: import.meta.env.VITE_API_URL+"api/boot/system/file/upload"
})
const init = () => {
    state.visible = true
}
defineExpose({
    init
})
</script>